<template>
	<view :class="{'page-box':true,bottom: true}">
		<view class="input-box">
			<view class="input-item">
				<view class="label"><text class="must">*</text>合同编号</view>
				<view class="input-icon">
					<input class="input" v-model="form.hetong_sn" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>装车时间</view>
				<view class="input-icon">
					<view class="input">
						<picker mode="date" :value="form.zhuanghuotime" :start="startDate" :disabled="disabled" :end="endDate" @change="zhuanghuotimeChange">
							<view class="uni-input">{{form.zhuanghuotime}}</view>
						</picker>
					</view>
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<!-- <view class="input-item">
				<view class="label"><text class="must">*</text>司机</view>
				<view class="input-icon" >
					<input class="input" v-model="form.siji_id" :disabled="disabled" :readonly="true"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view> -->
			<view class="input-item">
				<view class="label"><text class="must">*</text>司机名称</view>
				<view class="input-icon" @click="selectSiji">
					<input class="input" v-model="form.siji_name" :disabled="disabled" :readonly="true"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>车牌号码</view>
				<view class="input-icon">
					<input class="input" v-model="form.siji_chepai" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>司机挂牌</view>
				<view class="input-icon">
					<input class="input" v-model="form.siji_guapai" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>换头车牌号</view>
				<view class="input-icon">
					<input class="input" v-model="form.huanchetou" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>电话</view>
				<view class="input-icon">
					<input class="input" v-model="form.siji_phone" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>起点</view>
				<view class="input-icon">
					<input class="input" v-model="form.qidian" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>终点</view>
				<view class="input-icon">
					<input class="input" v-model="form.zhongdian" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>运费</view>
				<view class="input-icon">
					<input class="input" v-model="form.money" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<!-- <view class="input-item">
				<view class="label"><text class="must">*</text>品名</view>
				<view class="input-icon">
					<input class="input" v-model="form.pingming" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>名称</view>
				<view class="input-icon">
					<input class="input" v-model="form.name" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>包装方式</view>
				<view class="input-icon">
					<input class="input" v-model="form.baozhuang" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>数量</view>
				<view class="input-icon">
					<input class="input" v-model="form.number" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view> -->
			<!-- <view class="input-item">
				<view class="label"><text class="must">*</text>毛重</view>
				<view class="input-icon">
					<input class="input" v-model="form.maozhong" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="input-item">
				<view class="label"><text class="must">*</text>净重</view>
				<view class="input-icon">
					<input class="input" v-model="form.jingzhong" :disabled="disabled" placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view> -->
			<view class="status" :style="form.statusStyle">{{ form.statusText }}</view>
		</view>
				
		<view v-if="status == 'read'" class="order-item-box">
			<view class="order--item-wrapper" v-for="(item,index) in guiges" :key="index">
				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<uni-swipe-action-item>
						<view class="order-item">
							<view class="mingxi">
								<view class="label">规格</view>
								<!-- <view class="icon iconfont icon-jiahao1" @click="addMingxi(item)"></view> -->
							</view>
							<view class="createtime">创建时间: {{item.createtime}}</view>
							<view class="baozhuang">包装: {{item.baozhuang}}</view>
							<view class="mingcheng">名称: {{item.mingcheng}}</view>
							<view class="pingming">品名: {{item.pingming}}</view>
							<view class="pingming">净重: {{item.jingzhong}}</view>
							<view class="pingming">毛重: {{item.maozhong}}</view>
							<view class="mingxi">
								<view class="label">明细</view>
								<view v-if="false" class="icon iconfont icon-jiahao1" @click="addMingxi(item)"></view>
							</view>
							<view class="table-box">
								<view class="table-header">
									<view class="name">等级</view>
									<view class="count">数量</view>
									<view class="utils">操作</view>
								</view>
								<view class="table-body">
									<view class="table-item" v-for="(mxItem,mxIndex) in item.item" :key="mxIndex">
										<view class="name">{{mxItem.name}}</view>
										<view class="count">{{mxItem.count}}</view>
										<view v-show="false" class="utils">
											<!-- <view class="icon iconfont icon-lajitong" @click.stop="delMingxiFun(mxItem.id)"></view> -->
										</view>
									</view>
									<view v-if="item.item.length" class="table-item">
										<view class="name">总计</view>
										<view class="count">{{item.sumCount}}</view>
										<view class="utils">
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<template v-slot:right>
							<view v-if="false" class="swipe-btn">
								<view class="edit-btn" @click.stop="editItemFun(item)">
									编辑
								</view>
								<view class="del-btn" @click.stop="delItemFun(item.id)">
									删除
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
			</view>
		</view>
		
		<view class="input-box" v-if="form.caozuobeizhu" style="margin-top: 30rpx;">
			<view class="input-item">
				<view class="label"><text class="must">*</text>操作备注</view>
				<view class="input-icon">
					<input class="input" v-model="form.caozuobeizhu" :disabled="disabled"  placeholder="请输入内容" />
					<view class="icon hide iconfont icon-youjiantou"></view>
				</view>
			</view>
		</view>
		
		<view class="upload-box">
			<view class="upload-title">司机证件照:</view>
			<view class="upload-com">
					
					<view class="img" 
						v-for="(item,index) in form.zhengjianzhao"
						:key="index"
					>
						  <image mode="scaleToFill" :src="item" @click="previewImage(index,'zhengjianzhao')"></image>
						  <view 
							class="del" 
							@click.stop="deleteImg(index,'zhengjianzhao')"
							v-if="!disabled"
						  ><view class="icon iconfont icon-guanbi"></view></view>
					</view>
					<view class="upload-com-btn" @click="uploadMoreImgs('zhengjianzhao')" v-if="!disabled">
							<view class="icon iconfont icon-jiahao1"></view>
					</view>
			</view>
		</view>
		
		<view class="upload-box">
			<view class="upload-title">车头车尾照片:</view>
			<view class="upload-com">
					
					<view class="img" 
						v-for="(item,index) in form.car_images"
						:key="index"
					>
						  <image mode="scaleToFill" :src="item" @click="previewImage(index,'car_images')"></image>
						  <view 
							class="del" 
							@click.stop="deleteImg(index,'car_images')"
							v-if="!disabled"
						  ><view class="icon iconfont icon-guanbi"></view></view>
					</view>
					<view class="upload-com-btn" @click="uploadMoreImgs('car_images')" v-if="!disabled">
							<view class="icon iconfont icon-jiahao1"></view>
					</view>
			</view>
		</view>
		
		<view class="bottom-btn" v-if="!disabled">
				<button type="primary" class="btn-confirm" size="mini" @click="confirmFun">保存</button>
		</view>
		
		<view class="bottom-btn" v-if="status == 'read' && form.status == '0'">
				<button type="primary" class="btn-confirm" size="mini" @click="changeStatus">接货处理</button>
		</view>
		
		<uni-popup ref="itemPopup" type="bottom" background-color="#fff">
			<view class="input-box">
				<view class="input-item">
					<view class="label">类型</view>
					<view class="input-icon">
						<view class="input">
							<picker :value="statusForm.status" :range="statusArr" range-key="label" @change="statusChange">
								<view class="uni-input">{{statusArr[statusForm.status]?.label}}</view>
							</picker>
						</view>
						<view :class="{ 'icon iconfont icon-youjiantou': true, }"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label">备注</view>
					<view class="input-icon">
						<input class="input" v-model="statusForm.context" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-save-box">
					<view class="input-save" @click="saveStatus">保存</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
	    onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import { ref,watch } from "vue"
	import { GetZhuangcheOrderDetile, CreateZhuangcheOrder, EditZhuangcheOrder, UpdateFahuoOrderStatus } from "@/configure/api/zhuangcheOrder.js"
	import { showErrMsg, showSuccessMsg } from "@/utils/msg";
	import { usePageCommonStore } from "@/store/pageCommon.js"
	import { getUserInfo } from "@/utils/getUserInfo.js"
	
	const pageCommonStore = usePageCommonStore()
	
	const form = ref({
		id: '',
		hetong_sn: '',
		zhuanghuotime: '',
		siji_chepai: '',
		siji_guapai: '',
		huanchetou: '',
		siji_name: '',
		siji_id: '',
		siji_phone: '',
		qidian: '',
		zhongdian: '',
		money: '',
		pingming: '',
		name: '',
		baozhuang: '',
		number: '',
		maozhong: '',
		jingzhong: '',
		userid: '',
		order_sn: ''
	})
	
	const confirmFun = async() => {
		let { 
			id, 
			order_sn,
			hetong_sn,
			zhuanghuotime,
			siji_chepai,
			siji_guapai,
			huanchetou,
			siji_name,
			siji_id,
			siji_phone,
			qidian,
			zhongdian,
			money,
			pingming,
			name,
			baozhuang,
			number,
			maozhong,
			jingzhong
		} = form.value;

		let opt = {
			order_sn,
			hetong_sn,
			zhuanghuotime,
			siji_chepai,
			siji_guapai,
			huanchetou,
			siji_name,
			siji_id,
			siji_phone,
			qidian,
			zhongdian,
			money,
			pingming,
			name,
			baozhuang,
			number,
			maozhong,
			jingzhong,
			userid: userInfo.value.id
		}
		
		if(status.value == 'edit'){
			opt.id = id
		}
		
		
		if(!hetong_sn){
			showErrMsg(`请输入合同编号!`)
			return
		}
		
		if(!zhuanghuotime){
			showErrMsg(`请输入装车时间!`)
			return
		}
		
		if(!siji_chepai){
			showErrMsg(`请输入车牌!`)
			return
		}
		
		if(!siji_guapai){
			showErrMsg(`请输入挂牌!`)
			return
		}
		
		if(!siji_name){
			showErrMsg(`请输入司机名称!`)
			return
		}
		
		if(!siji_phone){
			showErrMsg(`请输入电话!`)
			return
		}
		
		if(!qidian){
			showErrMsg(`请输入起点!`)
			return
		}
		
		if(!zhongdian){
			showErrMsg(`请输入重点!`)
			return
		}
		
		if(!money){
			showErrMsg(`请输入运费!`)
			return
		}
		
		if(!pingming){
			showErrMsg(`请输入品名!`)
			return
		}
		
		if(!name){
			showErrMsg(`请输入名称!`)
			return
		}
		
		if(!baozhuang){
			showErrMsg(`请输入包装方式!`)
			return
		}
		
		if(!number){
			showErrMsg(`请输入数量!`)
			return
		}
		
		if(!maozhong){
			showErrMsg(`请输入毛重!`)
			return
		}
		
		if(!jingzhong){
			showErrMsg(`请输入净重!`)
			return
		}

		if(status.value == 'add'){
			let res = await CreateZhuangcheOrder(opt);
			if(res.code == 200){
				showSuccessMsg("创建成功!");
				uni.navigateBack({
					delta: -1
				});
			}
		} else if(status.value == 'edit'){
			let res = await EditZhuangcheOrder(opt);
			if(res.code == 200){
				showSuccessMsg("编辑成功!");
				uni.navigateBack({
					delta: -1
				});
			}
		}
		
	}
	
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 3;
		} else if (type === 'end') {
			year = year + 5;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	
	const startDate = ref()
	const endDate = ref()
	const initFun = (order_sn) => {
		form.value.zhuanghuotime = getDate();
		startDate.value = getDate('start');
		endDate.value = getDate('end');
		
		if(order_sn){
			getDetail(order_sn)
		}
	}
	initFun()

	const zhuanghuotimeChange = (e) => {
		form.value.zhuanghuotime = e.detail.value;
	}
	
	const status = ref('add')
	const disabled = ref(false)
	const userInfo = ref()
	onLoad((detail)=>{
		let { state, order_sn } = detail
		
		if(state == 'read' || state == 'edit'){
			initFun(order_sn)
		}else{
			initFun()
		}
		
		
		status.value = state
		
		disabled.value = ( state == 'read' )
		
		getUserInfo().then((res)=>{
			userInfo.value = res;
		})
	})
	
	onShow(()=>{
		if(pageCommonStore.siji.length){
			form.value.siji_id = pageCommonStore.siji[0].id
			form.value.siji_name = pageCommonStore.siji[0].name
			form.value.siji_chepai = pageCommonStore.siji[0].chepai
		}
	})
	
	const itemPopup = ref()
	const changeStatus = () => {
		itemPopup.value.open()
		statusForm.value = {
			status: 0,
			context: ''
		}
	}
	
	const selectSiji = () => {
		uni.navigateTo({url:`/pages/me/siji/selectSiJi/selectSiJi`})
	}
	
	const guiges = ref([])
	const getDetail = async(order_sn) => {
		let res = await GetZhuangcheOrderDetile({order_sn});
		const statusStyleArr = ['background: #f89d39','background: var(--successColor)','background: var(--successColor)','background: var(--successColor)']
		const statusTextArr = ['未处理','录入仓库','直接销售','异地泊车']
		let {
			id, 
			hetong_sn,
			zhuanghuotime,
			siji_chepai,
			siji_guapai,
			huanchetou,
			siji_name,
			siji_id,
			siji_phone,
			qidian,
			zhongdian,
			money,
			pingming,
			name,
			baozhuang,
			number,
			maozhong,
			jingzhong,
			status,
			caozuobeizhu,
			zhengjianzhao,
			car_images,
			guige,
		} = res.data;
		if(res.code == 200){
			form.value = {
				id,
				order_sn,
				hetong_sn,
				zhuanghuotime,
				siji_chepai,
				siji_guapai,
				huanchetou,
				siji_name,
				siji_id,
				siji_phone,
				qidian,
				zhongdian,
				money,
				pingming,
				name,
				baozhuang,
				number,
				maozhong,
				jingzhong,
				status,
				statusStyle: statusStyleArr[parseInt(status)],
				statusText: statusTextArr[parseInt(status)],
				caozuobeizhu,
				zhengjianzhao: zhengjianzhao ? zhengjianzhao.split(",") : [],
				car_images: car_images ? car_images.split(",") : [],
			}
			guige.forEach((v,i)=>{
				let sumCount = 0;
				
				v.item.forEach((v1,i1)=>{
					sumCount += v1.count
				})
				v.sumCount = sumCount
			})
			guiges.value = guige
		}
	}
	
	const statusArr = [
		{
			label: '录入仓库',
			value: '1'
		},
		{
			label: '直接销售',
			value: '2'
		},
		{
			label: '异地泊车',
			value: '3'
		}
	]
	
	const statusForm = ref({
		status: 0,
		context: ''
	})
	
	const statusChange = (e) => {
		statusForm.value.status = e.detail.value
	}
	
	const saveStatus = async () => {
		let { pingming,number,hetong_sn } = form.value;
		let { status,context } = statusForm.value;
		let { order_sn } = form.value
		let res = await UpdateFahuoOrderStatus({
			status: parseInt(status) + 1,
			context,
			order_sn,
			id: userInfo.value.id
		});
		if(res.code == 200){
			showSuccessMsg("操作成功!");
			getDetail(order_sn)
			itemPopup.value.close()
			uni.navigateTo({url:`/pages/me/kucun-detail-add-edit/kucun-detail-add-edit?state=add&pingming=${pingming}&number=${number}&hetong_sn=${hetong_sn}`})
		}
	}
	
	//预览图片
	const previewImage = (index,key) => {
		let images = form.value[key];
		
		uni.previewImage({
			  current:images[index],    //  传 Number H5端出现不兼容 
			  urls: images
		});
	}

</script>

<style lang="scss">
	page{
		// background-color: #fff;
		.input-box{
			position: relative;
			overflow: hidden;
			
			.status{
				position: absolute;
				right: 0;
				top: 0;
				color: #fff;
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				border-bottom-left-radius: 12rpx;
			}
		}
		
		.upload-box{
			margin-top: 30rpx;
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 8rpx;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(211, 211, 219, 0.3);
			
			.upload-title{
				font-size: 30rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			
			.upload-com{
			  display: flex;
			  flex-direction: row;
			  justify-content: flex-start;
			  flex-wrap: wrap;
			  box-sizing: border-box;
			  
			  .upload-title{
				  font-size: 24rpx;
				  color: #333;
			  }
			}
			
			.upload-com .img,.upload-com .upload-com-btn{
			  width:112rpx;
			  height:112rpx;
			}
			
			.upload-com .img{
			  position: relative;
			  margin-right: 30rpx;
			  margin-bottom: 30rpx;
			}
			
			.upload-com .img image{
			  width:112rpx;
			  height:112rpx;
			}
			
			.upload-com .upload-com-btn{
				width: 112rpx;
				height: 112rpx;
				background-color: #f0f2f7;
				border-radius: 8rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			
			.upload-com .upload-com-btn .icon{
			  color: #D8D8D8;
			  font-size: 30rpx;
			}
			
			.upload-com .del{
			  font-size: 46rpx;
			  background: #124EFF;
			  color:#fff;
			  position: absolute;
			  right:0;
			  top:0;
			  width:32rpx;
			  height:32rpx;
			  border-radius: 100rpx;
			  margin-top: -12rpx;
			  margin-right: -12rpx;
			  @include flex-center();
			  
			  .icon{
				font-size: 24rpx;
				 color: #fff;
			  }
			}
		}
		
		.order-item-box{
			margin-top: 30rpx;
			.order--item-wrapper{
				margin-bottom: 30rpx;
			}
			.order-item{
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 8rpx;
				
				.createtime{
					margin-top: 20rpx;
				}
				
				.createtime,.baozhuang,.pingming,.mingcheng{
					font-size: 26rpx;
					color: #576987;
					margin-bottom: 20rpx;
				}
				
				.mingxi{
					width: 100%;
					@include flex(row,space-between,center);
					.label{
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
					
					.icon{
						color: var(--mainColor);
						padding: 10rpx;
					}
				}
				
				.table-box{
					.table-header{
						width: 100%;
						padding-top: 30rpx;
						box-sizing: border-box;
						@include flex-start();
						.name,.count{
							font-size: 24rpx;
							color: var(--mainColor);
							flex: 2;
							@include flex-start();
						}
						.name{
							
						}
						.count{
							
						}
						.utils{
							flex: 1;
							color: var(--mainColor);
							font-size: 22rpx;
							@include flex(row,flex-end,center);
						}
					}
					.table-body{
						.table-item{
							width: 100%;
							padding: 30rpx 0;
							border-bottom: 1px solid #CCD5E3;
							box-sizing: border-box;
							@include flex-start();
							.name,.count{
								font-size: 24rpx;
								color: #576987;
								flex: 2;
								@include flex-start();
							}
							.name{
								
							}
							.count{
								
							}
							.utils{
								flex: 1;
								color: var(--mainColor);
								font-size: 22rpx;
								@include flex(row,flex-end,center);
							}
						}
						
						// .table-item:last-child{
						// 	border-bottom: 0;
						// }
					}
				}
		
			}
		}
	}

	
</style>
